﻿@page "/splitbutton"
@page "/docs/guides/components/splitbutton.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>SplitButton</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a split button combining a primary action button with a dropdown menu, featuring multiple variants (filled/flat/outlined/text), content options (text/icons/images), different sizes (ExtraSmall/Small/Medium/Large), disabled and busy states, <code>AlwaysOpenPopup</code> mode, and customizable dropdown icons.
</RadzenText>

<RadzenText Anchor="splitbutton#filled" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Filled SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    These are the default Radzen SplitButton.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonFilled">
    <SplitButtonFilled />
</RadzenExample>

<RadzenText Anchor="splitbutton#flat" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Flat SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Flat"</code> for flat split button variant.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonFlat">
    <SplitButtonFlat />
</RadzenExample>

<RadzenText Anchor="splitbutton#outlined" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Outlined SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Outlined"</code> for outlined split button variant.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonOutlined">
    <SplitButtonOutlined />
</RadzenExample>

<RadzenText Anchor="splitbutton#text" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Variant="Variant.Text"</code> for text split button variant.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonText">
    <SplitButtonText />
</RadzenExample>

<RadzenText Anchor="splitbutton#content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Content in SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Text, icons and images can be added to a split button.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonContent">
    <SplitButtonContent />
</RadzenExample>

<RadzenText Anchor="splitbutton#sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    SplitButton Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Size</code> property to set split button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonSizes">
    <SplitButtonSizes />
</RadzenExample>

<RadzenText Anchor="splitbutton#disabled" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Disabled SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable a split button.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonDisabled">
    <SplitButtonDisabled />
</RadzenExample>

<RadzenText Anchor="splitbutton#busy"TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Busy SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>IsBusy="true"</code> to show the busy indicator.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonBusy">
    <SplitButtonBusy />
</RadzenExample>

<RadzenText Anchor="splitbutton#always-open-popup"  TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    AlwaysOpenPopup SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>AlwaysOpenPopup="true"</code> to open popup with items on click.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="SplitButtonAlwaysOpenPopup">
    <SplitButtonAlwaysOpenPopup />
</RadzenExample>

<RadzenText Anchor="splitbutton#customize-dropdown-icon"  TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DropDown icon of SplitButton
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize the dropdown icon of SplitButton. Use <code>DropDownIcon</code> parameter to set the icon.
</RadzenText>
<RadzenExample ComponentName="SplitButton" Example="CustomizeSplitButtonDropDownIcon">
    <SplitButtonDropDownIcon />
</RadzenExample>

<RadzenText Anchor="splitbutton#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor SplitButton component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to the SplitButton." },
        new KeyboardShortcut { Key = "Alt + DownArrow", Action = "Open/Close SplitButton popup." },
        new KeyboardShortcut { Key = "DownArrow on closed popup", Action = "Select next SplitButton item." },
        new KeyboardShortcut { Key = "UpArrow on closed popup", Action = "Select previous SplitButton item." },
        new KeyboardShortcut { Key = "Space or Enter on opened popup", Action = "Selects the focused SplitButton item and closes the popup." },
        new KeyboardShortcut { Key = "Escape", Action = "Closes the SplitButton popup." },
        new KeyboardShortcut { Key = "Space or Enter", Action = "Clicks SplitButton." }
    };
}
